<template>
    <div class="orderDetails">
        <breadcrumb :routerList="routerList"></breadcrumb>
        <div class="order-details">
            <el-row>
                <el-col :span="24" class="title">基本信息</el-col>
            </el-row>
            <el-row class="content">
                <el-row class="row-style">
                    <el-col :span="6">
                        订单号：<span>{{orderDetails.order_num}}</span>
                    </el-col>
                    <el-col :span="6">
                        下单时间：<span>{{$util.timeStampToTime(orderDetails.createtime)}}</span>
                    </el-col>
                    <el-col :span="6">
                        订单状态：<span>{{orderStatus}}</span>
                    </el-col>
                </el-row>
                <el-row class="row-style">
                    <el-col :span="6">
                        发货时间：<span></span>
                    </el-col>
                    <el-col :span="6">
                        快递单号：<span>{{orderDetails.express_num}}</span>
                    </el-col>
                    <el-col :span="6">
                        到货时间：<span></span>
                    </el-col>
                    <el-col :span="6">
                        运费：<span>{{orderDetails.freight}}</span>
                    </el-col>
                </el-row>
            </el-row>
            <el-row>
                <el-col :span="24" class="title">收货人信息</el-col>
            </el-row>
            <el-row class="content">
                <el-row class="row-style">
                    <el-col :span="24">
                        收货姓名：<span>{{orderDetails.name}}</span>
                    </el-col>
                </el-row>
                <el-row class="row-style">
                    <el-col :span="24">
                        联系方式：<span>{{orderDetails.phone}}</span>
                    </el-col>
                </el-row>
                <el-row class="row-style no-border">
                    <el-col :span="24">
                        收货地址：<span>{{orderDetails.sheng + orderDetails.shi + orderDetails.qu + orderDetails.address}}</span>
                    </el-col>
                </el-row>
            </el-row>
            <el-row>
                <el-col :span="24" class="title">商品信息</el-col>
            </el-row>
            <el-row class="content" style="margin-bottom: 40px">
                <el-row>
                    <el-col :span="24">
                        <el-table
                                :data="orderDetails.son"
                                border
                                style="width: 100%;margin: 20px 0">
                            <el-table-column
                                    label="商品图片"
                                    width="90">
                                <template scope="scope">
                                    <img :src="scope.row.attr_list.img" alt="" class="img-style" />
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="product_name"
                                    label="商品名称"
                                    width="150">
                                <template scope="scope">
                                    <p>{{scope.row.product_name}}</p>
                                    <p><span>{{attrToString(scope.row.attr_list.attr_list)}}</span></p>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="attr_price"
                                    label="商品单价">
                            </el-table-column>
                            <el-table-column
                                    prop="attr_list.unit"
                                    label="单位">
                            </el-table-column>
                            <el-table-column
                                    prop="num"
                                    label="购买数量">
                            </el-table-column>
                            <el-table-column
                                    prop="son_price"
                                    label="商品总价">
                            </el-table-column>
                            <el-table-column
                                    prop="tk_content"
                                    label="退款理由">
                            </el-table-column>
                            <el-table-column
                                    label="证明图片">
                                <template scope="scope">
                                    <el-image
                                            v-for="(item,index) in scope.row.tk_img"
                                            style=" height: 50px;width:50px"
                                            :src="item"
                                            :key="index"
                                            :preview-src-list="scope.row.tk_img">
                                    </el-image>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="address"
                                    label="操作">
                                    <template scope="scope">
                                        <el-button @click="redund(scope.row)" type="info" size="mini">退款</el-button>
                                    </template>
                            </el-table-column>

                        </el-table>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="7" :offset="17">
                       合计：<span>{{orderDetails.all_price}}</span>元
                    </el-col>
                </el-row>
            </el-row>

        </div>
    </div>
</template>

<script>
    import breadcrumb from '@/components/breadcrumb.vue'
    export default {
        name: "orderDetails",
        components:{breadcrumb},
        data(){
            return {
                routerList:[
                    {
                        path:'',
                        name:'订单管理'
                    },
                    {
                        path:'/redund_list',
                        name:'退货退款列表'
                    },
                    {
                        path:'',
                        name:'退款详情'
                    },
                ],
                orderDetails:{},
                productList:[]
            }
        },
        computed:{
            orderStatus(){
                let status = this.orderDetails.status==0?'待支付':(this.orderDetails.status==1?'待发货':(this.orderDetails.status==2?'待收货':(this.orderDetails.status==3?'已完成':(this.orderDetails.status==4?'失效':(this.orderDetails.status==5?'退货':'')))))
                return status
            },
        },
        created(){
            // this.getOrderDetails();
        },
        mounted(){
            console.log(JSON.parse(this.$route.params.info));
            this.orderDetails = JSON.parse(this.$route.params.info);
        },
        methods:{
            async getOrderDetails(){
                let res = await this.$Http.getOrderDetails({
                    order_id:this.$route.query.id
                })
                console.log(res);
                this.orderDetails = res;
                this.productList = res.content
            },
            attrToString(attr_list){
                let string = ''
                for(let i in attr_list){
                    string += `${attr_list[i].attr_group_name}:${attr_list[i].attr_name};`
                }
                return string
            },
            async operationRedund(type,tk_status,id,son_id){
                let res = await this.$Http.operationRedund({
                    type:type,//1不唯一，2唯一
                    tk_status:tk_status,//1同意，2不同意
                    id:id,//打订单id
                    son_id:son_id//子订单id
                })
                console.log(res);
                if(res.code == 200){
                    this.$message.info('操作已完成！')
                    this.$router.go(-1)
                } else {
                    this.$message.warning('退款失败！')
                }
            },
            redund(row){
               let type = this.orderDetails.son.length == 1?2:1;
               let id = this.orderDetails.id;
               let son_id= row.id;
               let tk_status = 0;
                console.log(type, id, son_id, tk_status);
                this.$confirm(`商品：${row.product_name}，申请退款原因：${row.tk_content}，申请退款：${row.tk_price}元`, '退款申请', {
                    distinguishCancelAndClose: true,
                    confirmButtonText: '同意',
                    cancelButtonText: '拒绝'
                })
                    .then(() => {
                        console.log('同意')
                        tk_status = 1;
                        this.operationRedund(type,tk_status,id,son_id)
                    })
                    .catch(action => {
                        if(action==='cancel'){
                            console.log('拒绝')
                            tk_status = 2;
                            this.operationRedund(type,tk_status,id,son_id)
                        }else{
                            console.log('取消')
                        }
                    });
            }
        }
    }
</script>

<style scoped>
    .title{
        background-color: #fff;
        border-radius: 10px 10px 0 0;
        height:40px;
        line-height: 40px;
        box-sizing: border-box;
        padding-left:20px;
        margin-top: 30px;
        margin-bottom: 2px;
        font-weight: bold;
    }
    .content{
        box-sizing: border-box;
        background-color: #fff;
        padding:0 20px;
        border-radius: 0 0 10px 10px;
        color:#aaa;
        font-size: 14px;
    }
    .content span{
        color:#000;
    }
    .row-style{
        border-bottom:1px solid #eee;
        height:40px;
        line-height: 40px;
    }
    .no-border{
        border:none;
    }
    .img-style{
        width: 60px;
        height:60px;
    }
</style>
